<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://xmlns.jcp.org/jsf/html"
      xmlns:p="http://primefaces.org/ui">
    <h:head>
        <title>Login</title>

        <!-- CSS -->
        <h:outputStylesheet library="user/css" name="login_style.css"/>

        <!-- JS -->
        <h:outputScript library="user/js" name="login_jquery-1.2.6.min.js"/>

        <script type="text/javascript">
            $(document).ready(function() {
                $(".username").focus(function() {
                    $(".user-icon").css("left", "-48px");
                });
                $(".username").blur(function() {
                    $(".user-icon").css("left", "0px");
                });

                $(".password").focus(function() {
                    $(".pass-icon").css("left", "-48px");
                });
                $(".password").blur(function() {
                    $(".pass-icon").css("left", "0px");
                });
            });
        </script>

    </h:head>
    <h:body>
        <!--WRAPPER-->
        <div id="wrapper">

            <!--SLIDE-IN ICONS-->
            <div class="user-icon"></div>
            <div class="pass-icon"></div>
            <!--END SLIDE-IN ICONS-->

            <!--LOGIN FORM-->
            <h:form  id="login-form" class="login-form">
                <p:growl id="msg"/>
                <!--HEADER-->
                <div class="header">
                    <!--TITLE--><h1>Login</h1><!--END TITLE-->
                    <!--DESCRIPTION--><span>Welcome to login my website.</span><!--END DESCRIPTION-->
                </div>
                <!--END HEADER-->

                <!--CONTENT-->
                <div class="content">
                    <p:inputText id="username" value="#{u_memberManagedBean.member.username}" 
                                 styleClass="input username"/>
                    <p:watermark for="username" value="Username"/>

                    <p:password id="password" value="#{u_memberManagedBean.member.password}" 
                                styleClass="input password"/>
                    <p:watermark for="password" value="Password"/>
                </div>
                <!--END CONTENT-->

                <!--FOOTER-->
                <div class="footer">
                    <!--LOGIN BUTTON-->
                    <p:commandButton id="login" styleClass="button" value="Login" update="msg"
                                     action="#{u_memberManagedBean.login()}"/>
                    <!--END LOGIN BUTTON-->

                    <!--REGISTER BUTTON-->
                    <p:commandLink id="register" value="Register" styleClass="register"
                                   actionListener="#{u_memberManagedBean.goRedirect('faces/register.xhtml')}"/>
                    <!--END REGISTER BUTTON-->
                </div>
                <!--END FOOTER-->

            </h:form>
            <!--END LOGIN FORM-->

        </div>
        <!--END WRAPPER-->

        <!--GRADIENT--><div class="gradient"></div><!--END GRADIENT-->

    </h:body>
</html>

